<template>
    <view>
        <view class="title" v-if="isUser">
            <view class="left">
                <view class="left1">
                    <img :src="logo" alt />
                </view>
                <p class="p1">{{user.name}}</p>
                <p class="p2">模拟账号：{{user.code}}</p>
                <div v-if="false" class="left2">进入真实账号</div>
                <div v-else>
                    
                </div>
            </view>
            <view class="right"> 
                <view class="imgbox">
                    <img :src="logo" alt />
                </view>
            </view>
        </view>
        <view class="title denglu" v-else>
            <p @click="gologin">点击登录</p>
            <view class="kaitong">
                <view class="view1">开立真实账户</view>
                <view class="view2">开立模拟账户</view>
            </view>
        </view>
        <view class="info">
			<uni-list>
                <uni-list-item
                    title="充值"
                    :show-extra-icon="true"
					@click="goChongzhi"
                    :extra-icon="{color: '#999',size: '22',type: 'email-filled'}"
                ></uni-list-item>
                <uni-list-item
                    title="提现"
                    :show-extra-icon="true"
					@click="gotixian"
                    :extra-icon="{color: '#999',size: '22',type: 'email-filled'}"
                ></uni-list-item>
                <uni-list-item
                    title="我的资料"
                    @click="goziliao"
                    :show-extra-icon="true"
                    :extra-icon="{color: '#999',size: '22',type: 'contact-filled'}"
                ></uni-list-item>
            </uni-list>
			<view class="line"></view>
            <uni-list>
                <uni-list-item
                    title="帮助中心"
                    :show-extra-icon="true"
                    :extra-icon="{color: '#999',size: '22',type: 'help'}"
                ></uni-list-item>
                <uni-list-item
                    title="平台公告"
                    :show-extra-icon="true"
                    @click="gogonggao"
                    :extra-icon="{color: '#999',size: '22',type: 'chat'}"
                ></uni-list-item>
                <uni-list-item
                    title="关于我们"
                    :show-extra-icon="true"
                    :extra-icon="{color: '#999',size: '22',type: 'person'}"
                ></uni-list-item>
                <uni-list-item
                    title="系统设置"
                    :show-extra-icon="true"
                    @click="gosetting"
                    :extra-icon="{color: '#999',size: '22',type: 'gear'}"
                ></uni-list-item>
            </uni-list>
        </view>
    </view>
</template>

<script>
import logo from "../../../static/logo.png";
import uniList from "@/components/uni-list/uni-list.vue";
import uniListItem from "@/components/uni-list-item/uni-list-item.vue";
export default {
    components: { uniList, uniListItem },
    data() {
        return {
            user: {
                name: "Hoog",
                code: "400170152"
            },
            isUser: false,
            logo
        };
	},
	onLoad(){
		uni.getStorage({
			key: 'UserInfo',
			success: function(user) {
				let userId = user.data.data[0].UserId;
				// console.log(userId)
			}
		});
	},
	methods:{
		
		gologin(){
			uni.navigateTo({
				url:'../../login/login'
			})
		},
		goChongzhi(){
			uni.navigateTo({
				url:'../../chongzhi/chongzhi'
			})
		},
		gotixian(){
			uni.navigateTo({
				url:'../../tixian/tixian'
			})
		},
		gogonggao(){
			uni.navigateTo({
				url:'../../gonggao/gonggao'
			})
		},
		goziliao(){
			uni.navigateTo({
				url:'../../ziliao/ziliao'
			})
		},
		gosetting(){
			uni.navigateTo({
				url:'../../setting/setting'
			})
		},
	}
};
</script>

<style lang="less">
.title {
    width: 100%;
    height: 500upx;
    background: url("../../../static/image1.png") no-repeat;
    background-size: 100% 100%;
	display: flex;
	&.denglu{
		flex-direction:column;
		color: #fff;
		padding-left: 0upx;
		p{
            margin-left: 30upx;
			font-size: 36upx;
			color: #fff;
			margin-top: 100upx;
		}
		.kaitong{
            margin-left: 30upx;
			margin-top: 20upx;
			display: flex;
			view{
				margin-top: 30upx;
				font-size: 28upx;
				padding: 0 40upx;
				height: 66upx;
				line-height: 66upx;
				border-radius: 10upx;
			}
			.view1{
				background-color: #fff;
				color: #2172ff;
			}
			.view2{
				border: 1px solid #fff;
				margin-left: 10upx;
			}
		}
	}
    .left {
        width: 50%;
        color: #fff;
        padding-left: 30upx;
            margin-left: 30upx;
        .left1 {
            width: 60upx;
            height: 60upx;
            margin-top: 50upx;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .p1 {
            font-size: 36upx;
            margin-top: 60upx;
        }
        .p2 {
            font-size: 30upx;
            margin-top: 26upx;
            color: #9ddaff;
        }
        .left2 {
            width: 300upx;
            height: 76upx;
            margin-top: 20upx;
            line-height: 76upx;
            font-size: 34upx;
            text-align: center;
            border-radius: 10upx;
            color: #4279ff;
            background-color: #fff;
        }
    }
    .right {
        width: 50%;
        .imgbox {
            float: right;
            margin: 200upx 80upx 0 0;
            width: 130upx;
            height: 130upx;
            overflow: hidden;
            border-radius: 65upx;
            img {
                width: 100%;
                height: 100%;
            }
        }
	}
}
	.line{
		width: 100%;
		height: 26upx;
		background-color: #f6f6f6;
	}
</style>
